<template>
  <div class="login_all__1AnJe">
    <div class="bounceIn login_con__Jw8-k">
      <div class="close__1bsst">
        <div class="close_out__y93Uh" @click="$emit('close')"></div>
      </div>
      <div class="login_bottom__3Wisz">
        <div class="bom__1TswV">
          <span class="title__3xq6-">{{ $t("username") }}:</span
          ><input
            type="text"
            :placeholder="$t('username')"
            :value="loginForm.email"
          />
        </div>
        <div class="bom__1TswV">
          <span class="title__3xq6-">{{ $t("password") }}:</span
          ><input
            type="password"
            :placeholder="$t('password')"
            :value="loginForm.password"
            id="password"
          /><span
            class="show_password__15zeV"
            :class="isShow ? 'is_show_pass__1vJNJ' : ''"
            @click="showPassword"
          ></span>
        </div>
        <div class="remember__cy_wP">
          <div></div>
          <!-- <div><i class="remember_pass__28Rjh"></i>记住密码</div> -->
          <!-- <div><a href="#/help/server">忘记密码?</a></div> -->
          <router-link to="/register"
            ><div>
              {{ $t("NoAccountNumber")
              }}<span
                class="color1__3ap4t"
                style="cursor: pointer"
                @click="$emit('close')"
                >{{ $t("toRegister") }}</span
              >
            </div></router-link
          >
        </div>
        <p class="btn__14ZQw" @click="login">{{ $t("logIn") }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { httpInfo, httpMobileLogin } from "@/http/api";
export default {
  name: "loginDialog",
  data() {
    return {
      isShow: false,
      loginForm: {
        email: "",
        password: "",
      },
      loginAjax: false,
    };
  },
  methods: {
    showPassword() {
      this.isShow = !this.isShow;
      const passwordInput = document.getElementById("password");
      const type =
        passwordInput.getAttribute("type") === "password" ? "text" : "password";
      passwordInput.setAttribute("type", type);
    },
    async login() {
      if (this.loginAjax) return;
      if (!this.loginForm.email) return;
      if (!this.loginForm.password.trim()) return;

      let params = {
        account_name: this.loginForm.email,
        password: this.loginForm.password,
        type: "email",
      };

      let res = await httpMobileLogin(params);
      if (res.code == 0) {
        this.$message({
          type: "success",
          message: "登录成功",
        });
        if (res.code == 0) {
          localStorage.setItem("TOKEN", res.data.token);
          // 获取用户信息
          let res2 = await httpInfo();
          if (res2.code == 0) {
            localStorage.setItem("email", this.email.trim());
            localStorage.setItem("mobile", this.mobile);
            localStorage.setItem("areaCode", this.areaCode);
            localStorage.setItem("account_name", res2.data.account_name);
            localStorage.setItem("invite_code", res2.data.invite_code);
            localStorage.setItem("uid", res2.data.uid);
            localStorage.setItem("avatar", res2.data.avatar);
            localStorage.setItem("is_agent", res2.data.is_agent);
            localStorage.setItem(
              "accept_language",
              res2.data["accept-language"] || "en"
            );
            this.isLogin = true;
          }
        }
      } else {
        this.$message.error(res.message);
      }
      this.loginAjax = false;
    },
  },
};
</script>
<style lang="less" scoped>
.login_all__1AnJe {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background: rgba(0, 0, 0, 0.4);
  .login_con__Jw8-k {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 640px;
    height: 682px;
    margin: 0 auto;
    border-radius: 0 0 24px 24px;
    background-image: url(../assets/img/games/弹窗-人物.png);
    background-repeat: no-repeat;
    background-position-x: center;
    .close__1bsst {
      height: 80px;
      border-radius: 26px 26px 0 0;
      background-color: #fff;
      background-image: url(../assets/img/games/foot_logo.a663f60b.jpg),
        url(../assets/img/games/loginClose.990cd7e7.png);
      background-repeat: no-repeat;
      background-position: 38px, 568px top;
      background-size: 120px, auto;
      .close_out__y93Uh {
        float: right;
        width: 61px;
        height: 60px;
        margin-right: 15px;
        cursor: pointer;
      }
    }
  }
  .login_bottom__3Wisz {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 330px;
    padding: 60px 90px 40px;
    border-radius: 0 0 24px 24px;
    color: #fff;
    background-color: #513316;
    input {
      width: 380px;
      height: 32px;
      border-radius: 4px;
      border: 1px solid #fff;
      text-indent: 10px;
      color: #e5e5e5;
      font-size: 16px;
      background: transparent;
    }
    .btn__14ZQw {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 240px;
      height: 40px;
      background-color: #ffe417;
      border-radius: 4px;
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
    }
    .bom__1TswV {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 32px;
      position: relative;
      margin-bottom: 20px;
      .title__3xq6- {
        justify-content: flex-end;
        align-items: center;
        min-width: 100px;
        padding-right: 10px;
        font-size: 20px;
      }
    }
    .bom__1TswV {
      display: flex;
      height: 32px;
      position: relative;
      .title__3xq6- {
        justify-content: flex-end;
        align-items: center;
        width: 80px;
        padding-right: 10px;
        font-size: 20px;
      }
      .is_show_pass__1vJNJ {
        background: url(../assets/img/games/show_pass_active.2093e3e1.png)
          no-repeat 50% !important;
      }
      .show_password__15zeV {
        display: flex;
        width: 42px;
        height: 100%;
        cursor: pointer;
        background: url(../assets/img/games/show_pass.4d7f59ac.png) no-repeat
          50%;
        position: absolute;
        top: 1px;
        right: 0;
      }
    }
  }
  .remember__cy_wP {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 32px 9px 38px 43px;
    div:first-child {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .remember_pass__28Rjh {
      display: inline-flex;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      cursor: pointer;
      background: url(../assets/img/games/remeber.99b55009.png) no-repeat;
      background-size: cover;
    }
    div a {
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }
  }
  .color1__3ap4t {
    color: #ffe417 !important;
  }
}
</style>
